<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ref属性</title>
</head>
    <!-- ref  在vue的模板中 我们可以在任何元素中添加ref属性   这样我们就可以在vue实例中引用这些元素      类比document.querySelector("")   -->
<body>
    <div id="app">
        <input type="text" ref="input1" id="input1" />
        <input type="number" ref="input2" id="input2" />
        <button @click="add()" ref="refsButton" style="background:#000;">添加</button>
        <ul v-for="item in list">
            <li ref="item">姓名:{{item.name}}:年龄： {{item.age}}</li>
        </ul>
        <my-component ref="com"></my-component>
    </div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('my-component',{
        template: "<div class='inner'>我是内部元素</div>"
    })
     var a = new Vue({
         el:'#app',
         data: {
             list: [
                 { name:'a',age:18},
                 { name:'b',age:19},
                 { name:'c',age:20},

             ]
         },
         methods: {
             add() {
                 this.$refs.input1.value = '22';
                 console.log(this.$refs.input2.type);
                 console.log(this.$refs.refsButton.style);
                 console.log(document.getElementById('input1'));  
             }
         },
        mounted() {
            console.log(this.$refs);
        },
     })
</script>
</html>